<template>
	<view class="box screen-all flex">
		<head-navigation></head-navigation>
		<view class="top-view flex aCenter">
			<image class="top-image" src="../../static/party.png"></image>
		</view>
		<view class="content-view flex">
			<view class="item-view flex row aCenter">
				<text class="input-title">{{role == 2 || role == 3 ? '客户姓名' : '姓名'}}</text>
				<input class="input-text flex-1" v-model="name" placeholder="请输入您的姓名" />
			</view>
			<view class="item-view flex row aCenter">
				<text class="input-title">{{role == 2 || role == 3 ? '客户电话' : '联系电话'}}</text>
				<input class="input-text flex-1" v-model="phone" placeholder="请输入" type="number"/>
			</view>
			<view class="item-view flex row aCenter" @click="showPeoplePicker()">
				<text class="input-title">到店人数</text>
				<text class="input-hint flex-1" :class="[peopleNum ? 'black-color':'']">{{ peopleNum ? peopleNum + '人' : '请选择到店人数' }}</text>
			</view>
			<view class="item-view flex row aCenter" @click="showDatetimePicker()">
				<text class="input-title">到店日期</text>
				<text class="input-hint flex-1" :class="[dateTime ? 'black-color' : '']">{{ dateTime ? dateTime : '选择日期' }}</text>
				<image class="input-icon" src="../../static/time_b.png"></image>
			</view>
			<view class="item-view flex row aCenter" @click="showTimePicker()">
				<text class="input-title">选择时间</text>
				<text class="input-hint flex-1" :class="[time ? 'black-color' : '']">{{ time ? time : '选择时间' }}</text>
				<image class="input-icon" src="../../static/time_r.png"></image>
			</view>
			<view class="item-view flex row aCenter">
				<text class="input-title">备注：</text>
				<textarea value="" placeholder="请输入" v-model="bz"/>
			</view>
		</view>
		
		<uni-data-picker style="position: fixed;bottom: -999rpx;z-index: 999;" ref="peoplePicker" :localdata="peopleItems" popup-title="请选择到店人数" @change="onPeopleChange"></uni-data-picker>
		<uni-datetime-picker
			style="position: fixed;bottom: -999rpx;z-index: 999;"
			ref="datetimePicker"
			type="date"
			:start="startTime"
			:end="endTime"
			@change="onDateChange"
		/>
		
		<!-- :start="new Date()"
		end="2021-10-20" -->
		<!-- <uni-datetime-picker
			style="position: fixed;bottom: -999rpx;z-index: 999;"
			ref="timePicker"
			type="time"
			@change="onDateChange"
		/> -->
		<mx-date-picker :show="showTimePickerView" type="time" @confirm="onTimeChange" @cancel="onTimeChange" />
		
		<view class="bom-btn flex center" @click="onSubmit">
			提交预定
		</view>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	import XUtil from '../../common/xlb-util.js';
	import moment from 'moment';
	
	export default {
		components: {
			MxDatePicker
		},
		data() {
			return {
				role: 1, //1用户 2达人 3助理
				
				type: 2,
				
				name: '',
				
				phone: '',
				
				showTimePickerView: false,
				
				peopleItems: [],
				
				peopleNum: 0,
				
				dateTime: '',
				
				time: '',
				
				startTime: moment(new Date()).format('YYYY-MM-DD'),
				
				endTime: moment(new Date()).add(7, 'day').format('YYYY-MM-DD'),
				
				onSubmit: () => {},
				bz:''
			}
		},
		onLoad(option) {
			this.onSubmit = XUtil.debounce(this.submit, 256, true);
			
			this.type = option.type == 1 ? 1 : 2;
			
			this.role = uni.getStorageSync('role');
			console.log('当前用户身份 role=', this.role);
			
			this.initPeopleNum(20);
		},
		methods: {
			initPeopleNum (num) {
				let list = [];
				for(let i = 0;i < num;i++){
					list.push({ text: (i+1)+'人', value: (i+1)+'' });
				}
				this.peopleItems = list;
			},
			showPeoplePicker () {
				this.$refs.peoplePicker.show();
			},
			showDatetimePicker () {
				this.$refs.datetimePicker.show();
			},
			showTimePicker () {
				// this.$refs.timePicker.show();
				this.showTimePickerView = true;
			},
			onPeopleChange (e) {
				// console.log(e.detail.value);
				let item = e.detail.value[0];
				this.peopleNum = item.value;
			},
			onDateChange (e) {
				// console.log(e);				
				this.dateTime = e;
			},
			onTimeChange (e) {
				// console.log(e.value);
				this.showTimePickerView = false;
				this.time = e.value;
			},
			submit () {
				console.log('提交');
				console.log(this.bz)	
				if(!this.name){
					uni.showToast({ title: '请输入姓名', icon: 'none' });
					return ;
				}
				if(!this.phone){
					uni.showToast({ title: '请输入联系电话', icon: 'none' });
					return ;
				}
				if(!this.peopleNum){
					uni.showToast({ title: '请选择人数', icon: 'none' });
					return ;
				}
				if(!this.dateTime){
					uni.showToast({ title: '请选择日期', icon: 'none' });
					return ;
				}
				if(!this.time){
					uni.showToast({ title: '请选择时间', icon: 'none' });
					return ;
				}
				
				uni.showToast({ title: "处理中...", icon: 'loading', mask: true, duration: 10000 });
				
				// api/index/subscribe
				// token	
				// [string]	是			
				// role	
				// [string]	是	用户类型1=用户,2=达人,3=达人助理
				let params = {
					token: uni.getStorageSync("token"),
					name: this.name,	 // [string]	是	姓名		
					phone: this.phone,	 // [string]	是	手机号		
					num: this.peopleNum,  // [int]	是	人数		
					day: this.dateTime,	 // [string]	是	日期		
					time: this.time,	 // [string]	是	时间		
					role: uni.getStorageSync('role'), //用户类型1=用户,2=达人,3=达人助理
					type: this.type, // 1=会员预约 2=达人预约
					remarks:this.bz
				}
				console.log(params);
				this.$request("api/index/subscribe", params)
					.then(({ code, msg, data, time }) => {
						console.log(code, msg, data);
						uni.hideToast();
						uni.showToast({ title: msg, icon: 'none' });
						
						if(code == 1){
							this.name = '';
							this.phone = '';
							this.peopleNum = '';
							this.dateTime = '';
							this.time = '';
							
							uni.navigateTo({
								url: 'reserve-submit'
							})
						}else{
							
						}
					}).catch((e) => {
						uni.hideToast();
						console.log(e);
					});
			},
		}
	}
</script>

<style>
	.top-view {
		width: 100%;
		height: 375rpx;
		background-color: #010B24;
		border-bottom-right-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
	}
	.top-image {
		width: 515rpx;
		height: 208rpx;
	}
	.content-view {
		width: 690rpx;
		min-height: 100rpx;
		background-color: #FFF;
		margin-left: 30rpx;
		margin-top: -130rpx;
		border-radius: 30rpx;
		padding: 0 38rpx;
	}
	.item-view {
		width: 100%;
	    padding: 36rpx 0;	
		border-bottom: 1rpx solid #EFEFEF;
	}
	.input-title {
		width: 150rpx;
		font-size: 28rpx;
		color: #121212;
	}
	.input-text {
		font-size: 28rpx;
		color: #121212;
	}
	.input-hint {
		font-size: 28rpx;
		color: #787878;
	}
	.input-icon {
		width: 37rpx;
		height: 37rpx;
	}
	.bom-btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		background-color: #010B24;
		font-size: 28rpx;
		color: #FFF;
	}
	.bom-btn:active {
		background-color: #010B24EF;
	}
	.black-color {
		color: #121212;
	} 
	textarea{
	    border: 2rpx solid #dbdbdb;
	    height: 174rpx;
	    outline: none;
	    padding: 14rpx;
	    border-radius: 10rpx;
	    font-size: 26rpx;
		line-height: 44rpx;
	}
</style>
